<template>
  <div class="wrapper-container" style="display: flex; flex-direction: column">
    <div class="search-container">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="trem"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div
          class="search-container-item"
          v-show="this.record !== 3 && this.record !== 4"
        >
          <span>月份：</span>
          <el-select
            v-model="yuefen"
            style="width: 88px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in yfList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div
          class="search-container-item"

          v-show="this.record === 1 "
        >
          <span v-show="this.record === 1">督导专家：</span>
          <el-input
            v-model="tckr"
            placeholder=""
            size="mini"
            style="width: 120px; height: 24px"
          ></el-input>
        </div>
        <div class="search-button" v-show="this.record !== 4">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span @click="special">查询</span>
        </div>
      </div>
      <div class="search-container-right" style="margin-left: 30px">
        <div
          class="statisticals-button"
          :class="isactive(index)"
          v-for="(item, index) in supervisionlist"
          :key="index" 
        >
          <span @click="choiceLink(index)">{{ item.name }}</span>
         
        </div>
          <div class="search-button" style="width:140px">
         
          <span @click="fxtj">按督导专家分析</span>
        </div>
         <div class="search-button" style="width:140px">
         
          <span @click="ddjg">督导结果查看</span>
        </div>
      </div >
    </div>
    <!--    系督导查看-->
 
    <!--    按教员统计-->
    <statisticals v-show="this.record === 0" :supqueryavg="supqueryavg"></statisticals>
    <!--    督导专家分析-->
    <supervisingExperts v-show="this.record === 1" :spequery="spequery"></supervisingExperts>
    <permissions v-show="this.record === 3"></permissions>
    <viewRoles v-show="this.record === 4"></viewRoles>
    <div class="bottom-block" v-show="this.record === 1 || this.record === 0">
      <div class="text">授课教员名字后加“*”为课程负责人</div>
    </div>
<!--    <div class="btn">-->
<!--      <el-button-->
<!--        native-type="submit"-->
<!--        size="medium "-->
<!--        type="warning"-->
<!--        class="submit"-->
<!--        v-show="this.record === 3"-->
<!--        @click="choiceLink(4)"-->
<!--      >授权-->
<!--      </el-button-->
<!--      >-->
<!--    </div>-->
  </div>
</template>

<script>
import supervision from "@/views/teacher/SupervisionTeam/supervision";
import statisticals from "@/views/director/SupervisionTeam/statisticals";
import supervisingExperts from "@/views/teacher/SupervisionTeam/supervisingExperts";
import permissions from "@/views/teacher/SupervisionTeam/permissions";
import viewRoles from "@/views/teacher/SupervisionTeam/viewRoles";
import {spequery, supquery, supqueryavg,} from "@/api/teacher/supervision";

export default {
  components: {
    supervision,
    statisticals,
    supervisingExperts,
    viewRoles,
    permissions,

  },
  name: "supervisonMain",
  data() {
    return {
      name: '',
      tremid: '',
      trem: '2022春',
      //按督导专家分析
      spequery: '',
      //按教员统计
      supqueryavg: '',
      //系督导结果查看
      supquery: '',
      tckr:"",
      xqList: [
        {
          value: "2021春",
          label: "2020春",
        },
        {
          value: "2021夏",
          label: "2020夏",
        },
      ],
      yuefen: "",
      yfList: [
        {
          value: "12月",
          label: "12月",
        },
        {
          value: "11月",
          label: "11月",
        },
      ],
      record: 0,
      supervisionlist: [
     
        {
          url: "/teacher/SupervisionTeam/statisticals",
          name: "按教员统计",
          class: "",
        },
      
     
      ],

    };
  },

  mounted() {
    this.special()
  },
  methods: {
    fxtj(){
       this.$router.push({
        path: "/director/SupervisionTeam/supervisingExperts",
      
      });
    },
    ddjg(){
       this.$router.push({
        path: "/director/SupervisionTeam/supervision",
      
      });
    },
    special() {
      
      let obj = {
        //教研室名ID
        name: this.name,
        trem: this.trem,
        tremid: this.tremid,
        yuefen: this.yuefen,
        tckr:this.tckr
      }
      console.log(obj,"sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss")
      return new Promise(() => {
        //按督导信息分析
        
        spequery(obj).then(res => {
          this.spequery = res.data.data
          console.log("====按督导专家分析====", this.spequery);
        });
      
        //系督导查看
        supquery(obj).then(res => {
          this.supquery = res.data.data
          console.log("====系督导查看====", this.supquery);
        });
        //按教员统计
        supqueryavg(obj).then(res => {
          this.supqueryavg = res.data.data
          console.log("====按教员统计====", this.supqueryavg);
        });


      })
    },


    choiceLink(index) {
      this.record = index;
    },
    isactive(index) {
      let record = this.record;
      if (record === 4) {
        record = 3;
      }
      if (index === record) {
        return "active";
      }
    },
  },
  computed: {}, //计算属性
};
</script>


<style lang="less" scoped>
@import "../../../styles/supervision.less";

/deep/ .table-container {
  margin-top: 30px;



  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.wrapper-container .search-container .statisticals-button {
  background: #f1fff8;
  border: 1px solid #02c86c;
  color: #02c86c;
  opacity: 1; 
}

.wrapper-container .search-container .active {
  background: #15cc78;
  color: #f1fff8;
}

.btn {
  margin-top: 271px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 271px;

  .submit {
    width: 84px;
    height: 27px;
    line-height: 8px;
  }
}
</style>
